<!-- home-search -->
<template>
  <div class="seach_contain">
    <div class="search_btn">
      <el-cascader
        v-model="value"
        :options="options"
        @change="handleChange"
      ></el-cascader>
      <el-input
        placeholder="按地点或公司名称搜索"
        v-model="search"
        class="searchBys"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div class="wechat">
      <el-popover
        placement="top-start"
        title="微信小程序"
        width="200"
        trigger="hover"
        content="这是微信小程序,这是微信小程序,这是微信小程序,这是微信小程序。"
      >
        <el-link type="primary" slot="reference"
          >去小程序，让找工作更便捷</el-link
        >
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  name: "homseSearch",
  data() {
    return {
      value: "",
      search: "",
      options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }]
          }]
        }]
    };
  },
  methods: {
     handleChange(value) {
        console.log(value);
      }
    // async loadAll() {
    //   let arr;
    //   await search_tag().then((data) => {
    //     arr = data.data.map((item) => {
    //       return { value: item };
    //     });
    //   });
    //   return arr;
    // },
  },
  async mounted() {
    // this.options = await this.loadAll();
    // this.options.unshift({ value: "不限" });
  },
};
</script>

<style lang='scss' scoped>
.seach_contain {
  background: white;
  padding: 14px;
  box-shadow: 0 0 0 1px rgb(150 131 131 / 15%), 0 2px 3px rgb(129 121 121 / 20%);
  transition: box-shadow 83ms;
  border-radius: 10px;
}
.seach_contain,
.search_btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search_btn {
    width: 66%;
  }
}
@media screen and (max-width:650px) {
  .wechat{
    display: none;
  }
  .seach_contain .search_btn{
    width: 100%;
  }
}
</style>